<template>
  <div class="audition84">
    <p><span class="color">nth-of-type()</span>选择的是当前元素的所有<span class="color">同类型</span>兄弟元素的第几个</p>
    <p><span class="color">nth-child()</span>选择的是当前元素的所有兄弟元素中的第几个</p>
    <p>为了方便看出区别，直接打印一下：</p>
    <v-md-preview :text="text1" />
    <p>控制台输出结果：</p>
    <img src="@images/nth-1.png" alt="" class="img">
    <p>可以看出：</p>
    <p>nth-of-type是选择同类型的p的次序</p>
    <p>而nth-child是选择所有的兄弟元素的次序，然后非同类型的p元素，次序对应的内容为空</p>
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition81',
  data() {
    return {
      text1: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <p class="p1">1</p>
        <h3 class="h1">1</h3>
        <p class="p2">2</p>
        <h3 class="h2">2</h3>
        <p class="p3">3</p>
        <h3 class="h3">3</h3>
        \<script>
          console.log(document.querySelector('p:nth-child(1)'))
          console.log(document.querySelector('p:nth-child(2)'))
          console.log(document.querySelector('p:nth-child(3)'))
          console.log(document.querySelector('p:nth-child(4)'))
          console.log(document.querySelector('p:nth-child(5)'))
          console.log(document.querySelector('p:nth-child(6)'))
          console.log('-----------------------------------------')
          console.log(document.querySelector('p:nth-of-type(1)'))
          console.log(document.querySelector('p:nth-of-type(2)'))
          console.log(document.querySelector('p:nth-of-type(3)'))
          console.log(document.querySelector('p:nth-of-type(4)'))
          console.log(document.querySelector('p:nth-of-type(5)'))
          console.log(document.querySelector('p:nth-of-type(6)'))
        \<\/script>
      </body>
      </html>
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>